<template>
  <div v-if="visible" class="modal-container">
    <div class="modal-overlay" @click="handleCancel"></div>
    <div class="modal-content modal-main">
      <div class="p-6">
        <h3 class="text-lg font-semibold mb-4">确认删除</h3>
        <p class="text-gray-600 mb-6">确定要删除该任务吗？此操作无法撤销。</p>
        <div class="flex justify-end gap-3">
<!--          <button-->
<!--            class="px-4 py-2 text-gray-600 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"-->
<!--            @click="handleCancel"-->
<!--          >-->
<!--            取消-->
<!--          </button>-->
          <button
            class="tech-btn cancel-btn"
            @click="handleCancel"
          >
            取消
          </button>
          <button
            class="tech-btn-warn delete-btn"
            @click="handleConfirm"
          >
            删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps, defineEmits, ref,onMounted, watch} from 'vue'
import API from '@/views/playbackTask/playbackTask.api.ts';
const props = defineProps<{
  visible: boolean;
  selectedParame: string;
}>()
const emit = defineEmits<{
  'update:visible': [value: boolean]
  'confirm': []
  'success': [{ type: string; content: string; duration: number }];
}>()

const handleCancel = () => {
  emit('update:visible', false)
}

const handleConfirm = () => {
  let selectedParame = props.selectedParame;
  API.deleteTask(selectedParame).then((res:any) => {
    if(res && res.code == 200) {
      emit('success', {type: 'success', content: '删除成功', duration: 500});
      emit('confirm')
      emit('update:visible', false)
    } else {
      emit('success', {type: 'error', content: '删除失败', duration: 500});
    }
  })
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.modal-overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.modal-content {
  position: relative;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  z-index: 51;
}
.dark-mode .modal-content {
    background: var(--se-main-bg-color);
    box-shadow: none;
    padding: 0;
    border: none;
}

.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  /*background: linear-gradient(90deg,*/
  /*  rgba(56, 189, 248, 0.5) 0%,*/
  /*  rgba(30, 64, 175, 0.8) 50%,*/
  /*  rgba(56, 189, 248, 0.5) 100%);*/
}

.text-gray-600 {
  font-size: 12px !important;
  color: var(--text-color);
}

@media (max-width: 1024px) {
  .modal-content {
    width: 85% !important;
    max-width: 320px !important;
  }

  .p-6 {
    padding: 1rem !important;
  }

  .text-lg {
    font-size: 14px !important;
  }

  .font-semibold {
    font-weight: 600 !important;
  }

  .mb-4 {
    margin-bottom: 0.75rem !important;
  }

  .text-gray-600 {
    font-size: 12px !important;
  }

  .mb-6 {
    margin-bottom: 1rem !important;
  }

  .gap-3 {
    gap: 0.5rem !important;
  }

  button {
    padding: 0.35rem 0.75rem !important;
    font-size: 12px !important;
    height: 28px !important;
  }

  .modal-content::before {
    height: 3px !important;
  }
}
.cancel-btn,
.delete-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
}
/* 深色模式样式 */


.dark-mode .modal-content {
    background: var(--se-main-bg-color);
    box-shadow: none;
    padding: 0;
    border: none;
}

.dark-mode .modal-content::before {
  content: '';
  background: none;
}

.dark-mode .text-lg {
  color: #e0e0e0;
}

.dark-mode .font-semibold {
  color: var(--text-color);
}

.dark-mode .text-gray-600 {
  color: rgba(224, 224, 224, 0.8);
}

/* 深色模式下的按钮样式 */
.dark-mode .px-4.py-2.text-gray-600.bg-gray-100 {
  background: rgba(51, 51, 51, 0.8);
  border: 1px solid rgba(85, 85, 85, 0.3);
  color: rgba(224, 224, 224, 0.9);
}

.dark-mode .px-4.py-2.text-gray-600.bg-gray-100:hover {
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.5);
  color: rgba(224, 224, 224, 1);
}

.dark-mode .px-4.py-2.text-white.bg-red-500 {
  background: rgba(239, 68, 68, 0.8);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ffffff;
}

.dark-mode .px-4.py-2.text-white.bg-red-500:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ffffff;
}
.dark-mode .cancel-btn {
    color: var(--error-color) !important;
    border: 1px solid var(--error-color) !important;

}
.dark-mode .cancel-btn:hover {
    background: var(--error-color) !important;
    color: var(--text-color) !important;
}
</style>
